<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<!-- head 头部-->
<head th:replace="admin/layout/include::head('用户管理','')"></head>

<body>
<!-- loading 动画-->
<div th:replace="admin/layout/include::loading"></div>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <!--<div class="layui-card-header">
            <h2 class="header-title">用户管理</h2>
            <span class="layui-breadcrumb pull-right">
              <a href="#!home_console">首页</a>
              <a><cite>用户管理</cite></a>
            </span>
        </div>-->
        <div class="layui-card-body">
            <div class="layui-form toolbar">
                <div class="pull-left layui-form-pane search-box">
                    <div class="layui-inline" style="width: 120px;">
                        <select id="user-search-key">
                            <option value="">-请选择-</option>
                            <option value="userName">账号</option>
                            <option value="nickName">用户名</option>
                            <option value="phone">手机号</option>
                            <option value="email">邮箱</option>
                        </select>
                    </div>
                    <div class="layui-inline">
                        <input id="user-search-value" class="layui-input" type="text" placeholder="输入关键字"/>
                    </div>
                    <div class="layui-inline">
                        <button id="user-btn-search" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索
                        </button>
                        <!--<button shiro:hasPermission="user:edit" id="user-btn-add" class="layui-btn icon-btn"
                                lay-tips="新用户密码为123456"><i
                                class="layui-icon">&#xe654;</i>添加
                        </button>-->
                    </div>
                </div>
            </div>

            <table class="layui-table" id="user-table" lay-filter="user-table">


            </table>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<shiro:hasPermission name="user:edit">
    <script type="text/html" id="user-table-bar">
        <a class="layui-btn layui-btn-xs" lay-event="userAuth">账号授权</a>
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" ajax-event="del" ajax-url="/admin/user/" value="{{d.id}}">删除</a>
        <!--<a class="layui-btn layui-btn-xs" lay-event="reset">重置密码</a>-->
    </script>
</shiro:hasPermission>
<!-- 表格状态列 -->
<script type="text/html" id="user-tpl-state">
    <input type="checkbox" lay-filter="updateState" ajax-url="/admin/user/updateState/" value="{{d.id}}" lay-skin="switch" lay-text="正常|禁用"
           {{d.state==0?'checked':''}}/>
</script>
<script type="text/html" id="toolbarOepration">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add" lay-tips="新用户密码为123456"><i
                class="layui-icon">&#xe654;</i>添加</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" ajax-event="batchDel" ajax-url="/admin/user/">
            <i class="layui-icon layui-icon-delete"></i>批量删除</button>
    </div>
</script>
<!-- js部分 -->
<div th:replace="admin/layout/include::js"></div>
<script>
    layui.use(['form', 'table', 'util', 'admin', 'element'], function () {
        var form = layui.form;
        var table = layui.table;
        var layer = layui.layer;
        var util = layui.util;
        var admin = layui.admin;
        var element = layui.element;

        form.render('select');


        // 渲染表格= 
        table.render({
            elem: '#user-table',
            url: '/admin/user/',
            page: true,
            loading: true,
            toolbar:'#toolbarOepration',
            height: 'full-110',
            limit: 12,
            limits: [12, 20, 50, 100],
            response: {
                countName: 'total'
            },
            cols: [
                [
                {type: 'checkbox'},
                {field: 'userName', sort: true, title: '账号'},
                {field: 'nickName', sort: true, title: '用户名'},
                {field: 'phone', sort: true, title: '手机号'},
                {field: 'email', title: '邮箱'},
                {field: 'emailVerified',minwidth:50, title: '是否验证'},
                {
                    field: 'userGrade', minwidth: 150, align: 'center', templet: function (d) {
                        if (d.userGrade == 0) {
                            return '<span class="layui-badge layui-bg-gray">普通用户</span>';
                        }
                        else if (d.userGrade == 1) {
                            return '<span class="layui-badge">终身VIP</span>';
                        } else  if (d.userGrade == 2) {
                            return '<span class="layui-badge layui-bg-blue">至尊VIP</span>';
                        } else {
                            return '<span class="layui-badge-rim">unkown</span>';
                        }
                    }, title: 'VIP'
                },
                {field: 'sex', sort: true, title: '性别'},
                {
                    sort: true, templet: function (d) {
                        return util.toDateString(d.createTime);
                    }, title: '创建时间'
                },
                {field: 'state',minwidth: 100, sort: true, templet: '#user-tpl-state', title: '状态'},
                {align: 'center',fixed:'right',minWidth:280,fixed: 'right', toolbar: '#user-table-bar', title: '操作'}
            ]
            ]
        });

        //头工具栏事件
        table.on('toolbar(user-table)', function(obj){
            console.info(obj.config);
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    showEditModel();
                    break;
            };
        });
        // 工具条点击事件
        table.on('tool(user-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'edit') { // 修改
                showEditModel(data);
            }else if (layEvent === 'reset') { // 重置密码
                layer.confirm('确定重置此用户的密码吗？', function (i) {
                    layer.close(i);
                    B.post({
                        url: "/admin/user/restPwd",
                        loading: true,
                        data: {userId: obj.data.id},
                        success: function (data) {
                            if (data.success) {
                                layer.msg(data.msg, {icon: 1});
                            } else {
                                layer.msg(data.msg, {icon: 2});
                            }
                        }
                    });
                });
            }else if (layEvent === 'userAuth') {
                var authLayerIndex = admin.open({
                    type: 2,
                    title: '用户绑定账号['+data.userName+']',
                    area: ['960px', '540px'],
                    data: {userId:obj.data.id},
                    content: '/admin/userAuth/list',
                    end: function () {
                        //admin.getTempData('formOk') && table.reload('user-table');  // 成功刷新表格
                    }
                })
            }
        });

        // 显示表单弹窗
        var showEditModel = function (data) {
            admin.putTempData('t_user', data);
            admin.putTempData("formOk",false);
            admin.open({
                type: 2,
                title: data ? '修改用户' : '添加用户',
                area: ['420px', '510px'],
                content: '/admin/user/save',
                end: function () {
                    admin.getTempData('formOk') && table.reload('user-table');  // 成功刷新表格
                }
            });
        };

        // 搜索按钮点击事件
        $('#user-btn-search').click(function () {
            var key = $('#user-search-key').val();
            var value = $('#user-search-value').val();
            table.reload('user-table', {where: {searchKey: key, searchValue: value}});
        });


    });
</script>

</body>